<template>
  <div class="w h box-b p8 b-f">
    <div class="w m-b2">
      <el-button type="primary" @click="getDataList">查询</el-button>
      <el-button type="primary" @click="appendMenu({parentId:0},0)">添加一级菜单</el-button>
    </div>
    <div style="height:calc(100% - 60px)" class="w">
      <el-table :data="tableDataList" row-key="id" height="100%" border :default-expand-all="false">
        <el-table-column prop="name" label="菜单代码" sortable />
        <el-table-column prop="meta" label="显示名称" sortable>
          <template #default="{row}">
            <el-icon-render v-if="getMetaParams(row.meta)?.elIcon"
              :elIcon="getMetaParams(row.meta)?.elIcon"></el-icon-render>
            {{getMetaParams(row.meta)?.label}}
          </template>
        </el-table-column>
        <el-table-column prop="meta" label="显示名称" sortable>
          <template #default="{row}">
            {{getMetaParams(row.meta)?.label}}
          </template>
        </el-table-column>
        <el-table-column prop="item" label="路由" sortable />
        <el-table-column prop="name" label="菜单类型" sortable >
          <template #default="{row}">
            {{ row.type==1?'菜单':'其他' }}
          </template>
        </el-table-column>
        <el-table-column prop="meta" label="不显示到菜单" sortable>
          <template #default="{row}">
            <template v-if="row?.meta?.hidden">隐藏</template>
            <template v-else>显示</template>
          </template>
        </el-table-column>
        <el-table-column label="编辑" width="220px">
          <template #default="{row}">
            <el-button type="text" @click="appendMenu(row,row.id)">添加子菜单</el-button>
            <el-button type="text" @click="appendMenu(row,row.parentId,row.id,true)">编辑</el-button>
            <el-button type="text" @click="deleteMenu(row)" class="c-w">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import frameProperty from '@/mixins/frame-property'
import { ElIconRender } from '@/importComponents'
import { RequestCode } from '@/server/base'
import { Menu } from '@/apis/menu/index'
import { defineAsyncComponent } from 'vue'
export default {
  name: '菜单设置',
  mixins: [frameProperty],
  components: {
    ElIconRender
  },
  data() {
    return {
     
      tableData: [],

      listLoading: false
    }
  },
  computed: {
    tableDataList() {
      return this.tableData.filter((item: { name: string }) => {
        /**
         * 不管理特定页面
         */
        return !['main', 'login', 'register', '404'].includes(item.name.toLocaleLowerCase())
      })
    }
  },
  methods: {
    getMetaParams(meta: any) {
      if (!meta) {
        return {}
      }
      const { label, customLabel, hidden, width, handler, elIcon } = meta
      return {
        label,
        elIcon,
        customLabel: `<span>${customLabel ? '是' : '否'}</span>`,
        hidden: `<span>${hidden ? '是' : '否'}</span>`,
        width: `<span>${width}</span>`,
        handler: `<span>${handler}</span>`
      }
    },

    getDataList() {
      this.listLoading = true
      Menu.list()
        .then((res: RequestCode) => {
          this.tableData = this.getTreeMenu(res.data, 0)
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },

    getTreeMenu(data: any, parentId: number | string = 0) {
      const children = data
        .filter((item: { parentId: number | string }) => item.parentId == parentId)
        .map(
          (item: {
            id: string | number
            item: string
            children?: any[]
            path: string
            meta: string
            component: any
          }) => {
            item.path = parentId == 0 ? `/${item.path}` : item.path
            // if (item.item) {
            //   //@vite-ignore
            //   item.component = defineAsyncComponent(() => import(`@/${item.item}`))
            // }
            item.meta = eval(`(${item.meta})`)
            item.children = this.getTreeMenu(data, item.id)
            return item
          }
        )
      return children
    },

    appendMenu(row: any, _parentId: number | string, _id?: number | string, isEdit?: boolean) {
      if (!isEdit) {
        row = { parentId: +_parentId }
      }
      this.dialogPagePush({
        name: 'menuEdit',
        params: {
          isEdit,
          parentId: +_parentId,
          row
        }
      })
    },
    deleteMenu(row: { id: number | string }) {
      if (!row.id) {
        return
      }
      this.$confirm('确定删除吗', '提示')
        .then(res => {
          Menu.removeById({ id: row.id }).then((result: RequestCode) => {
            this.getDataList()
          })
        })
        .catch(e => {})
    }
  },
  created() {
    this.getDataList()
  }
}
</script>

<style lang="scss" scoped>
</style>